/**
 * This file is part of Covalent.
 *
 * Licensed under the Apache License 2.0 (the "License"). A copy of the
 * License may be obtained with this software package or at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Use of this file is prohibited except in compliance with the License.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Box, LinearProgress, Tooltip } from '@mui/material'
import { statusLabel } from '../../utils/misc'

const STATUS_COLORS = {
  RUNNING: 'running',
  COMPLETED: 'success',
  FAILED: 'error',
  CANCELLED: 'error',
  POSTPROCESSING: 'success',
  PENDING_POSTPROCESSING: 'success',
  POSTPROCESSING_FAILED: 'success',
}

const ResultProgress = (props) => {
  const { status, totalElectronsCompleted, totalElectrons } = props.result
  return (
    <Tooltip title={statusLabel(status)} placement="right">
      <Box sx={{ display: 'flex', alignItems: 'center', width: '120px' }}>
        <Box data-testid="resultProgress" sx={{ width: '50%', mr: 1 }}>
          <LinearProgress
            variant="determinate"
            color={STATUS_COLORS[status.toUpperCase()]}
            value={(totalElectronsCompleted * 100) / totalElectrons}
          />
        </Box>
        <Box sx={{ width: '50%' }}>
          <Box
            component="div"
            display="inline"
            sx={{
              color: `${STATUS_COLORS[status.toUpperCase()]}.main`,
              fontSize: '1rem',
            }}
          >
            {totalElectronsCompleted}
          </Box>
          <Box
            component="div"
            display="inline"
            sx={{
              color: `${STATUS_COLORS[status.toUpperCase()]}.main`,
              fontSize: '1rem',
            }}
          >
            /{totalElectrons}
          </Box>
        </Box>
      </Box >
    </Tooltip >
  )
}

export default ResultProgress
